#!/bin/bash

# ================================================================
# 首页错误检查和修复脚本
# ================================================================

GREEN='\033[0;32m'
YELLOW='\033[1;33m'
RED='\033[0;31m'
BLUE='\033[0;34m'
NC='\033[0m'

PROJECT_DIR="/Users/kevin/项目文件夹/交易平台/newsite/trading-center-front"

echo "================================================================"
echo "              首页错误诊断和修复工具"
echo "================================================================"
echo ""

# 1. 检查组件文件
echo "----------------------------------------------------------------"
echo "第1步：检查所需组件是否存在"
echo "----------------------------------------------------------------"

REQUIRED_COMPONENTS=(
    "bannerIndex.vue"
    "ProductCategories.vue"
    "HotProducts.vue"
    "LocalProducts.vue"
    "ExportProducts.vue"
    "marketList.vue"
    "FindGoods.vue"
    "FactoryProcurementHome.vue"
    "IndustryActivities.vue"
    "ChangxinExpress.vue"
    "TechExchange.vue"
    "CategoryMenu.vue"
    "HomeBanner.vue"
    "NoticePanel.vue"
)

MISSING_COMPONENTS=()

for component in "${REQUIRED_COMPONENTS[@]}"; do
    if [ -f "$PROJECT_DIR/components/$component" ]; then
        echo -e "${GREEN}✓${NC} $component"
    else
        echo -e "${RED}✗${NC} $component ${RED}(缺失)${NC}"
        MISSING_COMPONENTS+=("$component")
    fi
done

# 2. 检查样式文件
echo ""
echo "----------------------------------------------------------------"
echo "第2步：检查样式文件"
echo "----------------------------------------------------------------"

STYLE_FILES=(
    "assets/styles/_variables.scss"
    "assets/styles/_mixins.scss"
    "assets/styles/global.scss"
    "assets/styles/high-resolution.scss"
)

for file in "${STYLE_FILES[@]}"; do
    if [ -f "$PROJECT_DIR/$file" ]; then
        echo -e "${GREEN}✓${NC} $file"
    else
        echo -e "${RED}✗${NC} $file ${RED}(缺失)${NC}"
    fi
done

# 3. 检查 composables
echo ""
echo "----------------------------------------------------------------"
echo "第3步：检查 Composables"
echo "----------------------------------------------------------------"

COMPOSABLES=(
    "composables/useScreenAdaptation.ts"
    "composables/useZoomAdjustment.ts"
)

for file in "${COMPOSABLES[@]}"; do
    if [ -f "$PROJECT_DIR/$file" ]; then
        echo -e "${GREEN}✓${NC} $file"
    else
        echo -e "${RED}✗${NC} $file ${RED}(缺失)${NC}"
    fi
done

# 4. 检查 nuxt.config.ts
echo ""
echo "----------------------------------------------------------------"
echo "第4步：检查 Nuxt 配置"
echo "----------------------------------------------------------------"

if grep -q "@use \"@/assets/styles/_mixins.scss\"" "$PROJECT_DIR/nuxt.config.ts"; then
    echo -e "${GREEN}✓${NC} SCSS mixins 已配置"
else
    echo -e "${YELLOW}⚠${NC} SCSS mixins 未正确配置"
fi

if grep -q "assets/styles/global.scss" "$PROJECT_DIR/nuxt.config.ts"; then
    echo -e "${GREEN}✓${NC} 全局样式已配置"
else
    echo -e "${YELLOW}⚠${NC} 全局样式未配置"
fi

# 5. 检查后端服务
echo ""
echo "----------------------------------------------------------------"
echo "第5步：检查后端服务状态"
echo "----------------------------------------------------------------"

if curl -s http://localhost:8081/api/front/index/info > /dev/null 2>&1; then
    echo -e "${GREEN}✓${NC} 后端服务运行中 (端口 8081)"
else
    echo -e "${RED}✗${NC} 后端服务未响应"
    echo -e "  ${YELLOW}提示:${NC} 请运行 ./启动后端服务.sh"
fi

# 6. 生成修复建议
echo ""
echo "================================================================"
echo "                    诊断完成"
echo "================================================================"
echo ""

if [ ${#MISSING_COMPONENTS[@]} -gt 0 ]; then
    echo -e "${RED}发现缺失组件:${NC}"
    for comp in "${MISSING_COMPONENTS[@]}"; do
        echo "  - $comp"
    done
    echo ""
fi

# 生成修复报告
cat > "$PROJECT_DIR/../说明:脚本/首页诊断报告.md" << 'EOF'
# 首页诊断报告

**诊断时间**: $(date '+%Y-%m-%d %H:%M:%S')

## 问题汇总

### 常见错误及解决方案

#### 1. SCSS Mixin 未定义错误
**错误信息**: `[sass] Undefined mixin`

**原因**: nuxt.config.ts 中未正确配置 SCSS 预处理器

**解决方案**: ✅ 已在 nuxt.config.ts 中配置

#### 2. 组件导入错误
**错误信息**: `Cannot read properties of undefined`

**可能原因**:
- API 返回数据为 undefined
- 组件未正确导入
- 后端服务未运行

**解决方案**:
1. 确保后端服务运行: `./启动后端服务.sh`
2. 检查 API 响应: `curl http://localhost:8081/api/front/index/info`
3. 查看浏览器控制台错误

#### 3. 样式未生效
**原因**: 全局样式未导入

**解决方案**: 确保 nuxt.config.ts 的 css 数组包含:
```typescript
css: [
  '~/assets/styles/global.scss',
  '~/assets/styles/high-resolution.scss'
]
```

## 下一步操作

1. **重启开发服务器**
   ```bash
   cd /Users/kevin/项目文件夹/交易平台/newsite/trading-center-front
   # 停止当前服务 (Ctrl+C)
   npm run dev
   ```

2. **清除缓存**
   ```bash
   rm -rf .nuxt node_modules/.vite
   npm run dev
   ```

3. **检查浏览器控制台**
   - 打开 http://localhost:3000/home
   - 按 F12 打开开发者工具
   - 查看 Console 和 Network 标签

## 常用调试命令

```bash
# 测试后端 API
curl http://localhost:8081/api/front/index/info

# 测试轮播图 API
curl http://localhost:8081/api/front/index/banner

# 查看所有组件
ls -1 components/ | grep -i ".vue"
```
EOF

echo -e "${BLUE}诊断报告已生成:${NC}"
echo "  说明:脚本/首页诊断报告.md"
echo ""

echo -e "${GREEN}建议操作:${NC}"
echo "1. 重启前端开发服务器"
echo "2. 检查浏览器控制台错误"
echo "3. 查看诊断报告了解详情"
echo ""

